<template>
  <div style="width:100%;">
    <el-container>
      <el-header>
        {{tit}}
      </el-header>
      <el-main style="height:100%;width:60%; margin: 0 auto;">
        <el-row :gutter="15">
          <el-form ref="mask" :model="maskData" :rules="rules" size="medium" label-width="100px"
            label-position="left">
            <el-form-item label="规则名称" prop="name">
              <el-input v-model="maskData.name" placeholder="请输入规则名称" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
            <el-col :span="9">
              <el-form-item label="脱敏规则" prop="config">
                  <el-radio v-model="config" label="1">只显示前<el-input v-model="maskData.config['1']['before']" style="width:60px;"  @input="handleInput1" />个字符</el-radio>
                  <el-radio v-model="config" label="2">只显示后<el-input v-model="maskData.config['2']['after']" style="width:60px;"  @input="handleInput2"/>个字符</el-radio>
                  <el-radio v-model="config" label="3">只显示前<el-input v-model="maskData.config['3']['before']" style="width:60px;"  @input="handleInput3"/>个字符和后<el-input v-model="maskData.config['3']['after']" style="width:60px;"  @input="handleInput4"/>个字符</el-radio>
                  <el-radio v-model="config" label="4">
                    只显示
                    <el-input v-model="maskData.config['4']['chart']"  style="width:60px;" />
                    符号
                    <el-select v-model="maskData.config['4']['where']"  clearable :style="{width: '70px'}">
                      <el-option  :key="1" label="前" :value="1" ></el-option>
                      <el-option  :key="2" label="后" :value="2" ></el-option>
                    </el-select>
                    的
                    <el-input v-model="maskData.config['4']['num']"  style="width:60px;"  @input="handleInput5"/>
                    个字符,偏移量
                    <el-input type="number" v-model="maskData.config['4']['offset']" style="width:80px;"  ></el-input></el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注说明" prop="example">
                <el-input v-model="maskData.example" placeholder="请输入备注说明" clearable :style="{width: '100%'}">
                </el-input>{{show}}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item size="large">
                <el-button type="primary" @click="submitForm">确定</el-button>
                <el-button @click="resetForm">取消</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      show:'',
      tit : "新建脱敏规则",
      mask:this.$route.params.mask,
      maskData: {
        name: "",
        config: {
          1:{before:''},
          2:{after:''},
          3:{before:'',after:''},
          4:{
            chart:"",
            where:1,
            num:'',
            offset:0,
          }
        },
        example: "",
      },
      config:"1",
      rules: {
        name: [{
          required: true,
          message: '请输入规则名称',
          trigger: 'blur'
        }],
        config: [{
          required: true,
          message: '请至少选择一个config',
          trigger: 'change'
        }],
        example: [{
          required: true,
          message: '请输入备注说明',
          trigger: 'blur'
        }],
      },
      configOptions: [{
        "label": "只显示前个字符",
        "value": 1
      }, {
        "label": "只显示后个字符",
        "value": 2
      }, {
        "label": "只显示前个字符和后个字符",
        "value": 3
      }, {
        "label": "只显示符号（前/后）的个字符，偏移量：",
        "value": 4
      }],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    if(this.mask){
      this.tit = "编辑脱敏规则";
      let mconfig = {
          1:{before:''},
          2:{after:''},
          3:{before:'',after:''},
          4:{
            chart:"",
            where:1,
            num:'',
            offset:0,
          }
        };
      this.maskData = this.mask;
      this.config = Object.keys(JSON.parse(this.mask.config))[0];
      mconfig[this.config] = JSON.parse(this.mask.config)[this.config];
      this.maskData.config = mconfig;
      this.show = this.mask.description;
    }else{
      this.tit = "新建脱敏规则";
    }
  },
  methods: {
    submitForm() {
      var _this = this;
      this.$refs['mask'].validate(valid => {
        if (!valid) return
        let mconfig = {};
        mconfig[_this.config] = _this.$refs['mask'].model.config[_this.config];
        // TODO 提交表单
        if(_this.maskData.id){
          _this.axios
          .post(this.HOST + "/update", {
            id:_this.maskData.id,
            name: _this.$refs['mask'].model.name,
            config: JSON.stringify(mconfig),
            example: _this.$refs['mask'].model.example,
            description:_this.show
          })
          .then(function(res) {
            if(res.data){
              _this.$router.push("/");
            }
          })
          .catch(function(err) {
            console.log(err);
          });
        }else{
          _this.axios
          .post(this.HOST + "/add", {
            name: _this.$refs['mask'].model.name,
            config: JSON.stringify(mconfig),
            example: _this.$refs['mask'].model.example,
            description:_this.show
          })
          .then(function(res) {
            if(res.data){
              _this.$router.push("/");
            }
          })
          .catch(function(err) {
            console.log(err);
          });
        }
      })
    },
    resetForm() {
      this.$router.push("/");
    },
    handleInput1(value){
      this.maskData.config['1']['before']=value.replace(/^0(0+)|[^\d]+/g,'')==""?"":parseInt(value.replace(/^0(0+)|[^\d]+/g,''));
    },
    handleInput2(value){
      this.maskData.config['2']['after']=value.replace(/^0(0+)|[^\d]+/g,'')==""?"":parseInt(value.replace(/^0(0+)|[^\d]+/g,''));
    },
    handleInput3(value){
      this.maskData.config['3']['before']=value.replace(/^0(0+)|[^\d]+/g,'')==""?"":parseInt(value.replace(/^0(0+)|[^\d]+/g,''));
    },
    handleInput4(value){
      this.maskData.config['3']['after']=value.replace(/^0(0+)|[^\d]+/g,'')==""?"":parseInt(value.replace(/^0(0+)|[^\d]+/g,''));
    },
    handleInput5(value){
      this.maskData.config['4']['num']=value.replace(/^0(0+)|[^\d]+/g,'')==""?"":parseInt(value.replace(/^0(0+)|[^\d]+/g,''));
    },
    // handleInput6(value){
    //   this.maskData.config['4']['offset']=value.replace(/^0(0+)|[^\d]+/g,'')==""?"":parseInt(value.replace(/^0(0+)|[^\d]+/g,''));
    // }
  },
  watch:{
    maskData:{
      handler:function(newVal,oldVal){
        if(this.maskData.example == ""){
          this.show="";
        }else{
          if(this.config ==1){
            if(this.maskData.config['1'].before == ""){
              this.show="";
            }else{
              let length = this.maskData.example.length;
              let bef = parseInt(this.maskData.config['1'].before)
              if(length > bef){
                this.show = this.maskData.example.replace(this.maskData.example.substring(bef,length),"*".repeat(length-bef));
              }else{
                this.show = this.maskData.example;
              }
            }
          }else if(this.config ==2){
            if(this.maskData.config['2'].after == ""){
              this.show="";
            }else{
              let length = this.maskData.example.length;
              let aft = parseInt(this.maskData.config['2'].after)
              if(length > aft){
                this.show = this.maskData.example.replace(this.maskData.example.substring(0,length-aft),"*".repeat(length-aft));
              }else{
                this.show = this.maskData.example;
              }
            }
          }else if(this.config ==3){
            if(this.maskData.config['3'].before == "" || this.maskData.config['3'].after == ""){
              this.show="";
            }else{
              let length = this.maskData.example.length;
              let aft = parseInt(this.maskData.config['3'].after);
              let bef = parseInt(this.maskData.config['3'].before);
              if(length > aft+bef){
                this.show = this.maskData.example.replace(this.maskData.example.substring(bef,length-aft),"*".repeat(length-aft-bef));
              }else{
                this.show = this.maskData.example;
              }
            }
          }else{
            debugger;
            if(this.maskData.config['4'].chart == "" || this.maskData.config['4'].num == "" ){
              this.show="";
            }else{
              let leth = this.maskData.example.length;
              let where = parseInt(this.maskData.config['4'].where);
              let num = parseInt(this.maskData.config['4'].num);
              let offset = parseInt(this.maskData.config['4'].offset);
              let index = this.maskData.example.indexOf(this.maskData.config['4'].chart);
              if(index <0 || (num == 0 && offset == 0)){
                this.show = '*'.repeat(length);
              }else if((where ==1 && num>=index && offset >=(length-index))||(where ==2 && index+offset <=0 && num >=(length-index))){
                this.show = this.maskData.example;
              }else{
                if(where ==1){
                  let lef = Math.max(num,-offset);
                  let rgt = Math.max(0,offset);
                  let rp = '/.{0,'+lef+'}'+this.maskData.config['4'].chart+'.{0,'+rgt+'}/';
                  let cart = this.maskData.example.match(eval(rp))[0];
                  
                  if(cart != ""){
                    let elet = this.maskData.example.indexOf(cart);
                    let cleth = cart.length;
                    this.show = '*'.repeat(elet)+cart+'*'.repeat(leth-elet-cleth);
                  }else{
                    this.show = this.maskData.example.replace(this.maskData.example.substring(0,leth),'*'.repeat(leth));
                  }
                }else{
                  let lef = Math.max(0,-offset);
                  let rgt = Math.max(num,offset);
                  let rp = '/.{0,'+lef+'}'+this.maskData.config['4'].chart+'.{0,'+rgt+'}/';
                  let cart = this.maskData.example.match(eval(rp))[0];
                  if(cart != ""){
                    let elet = this.maskData.example.indexOf(cart);
                    let cleth = cart.length;
                    this.show = '*'.repeat(elet)+cart+'*'.repeat(leth-elet-cleth);
                  }else{
                    this.show = this.maskData.example.replace(this.maskData.example.substring(0,leth),'*'.repeat(leth));
                  }
                }
              }
            }
          }
        }
      },
      deep:true
    },
    config:{
      handler:function(newVal,oldVal){
        if(this.maskData.example == ""){
          this.show="";
        }else{
          if(this.config ==1){
            if(this.maskData.config['1'].before == ""){
              this.show="";
            }else{
              let length = this.maskData.example.length;
              let bef = parseInt(this.maskData.config['1'].before)
              if(length > bef){
                this.show = this.maskData.example.replace(this.maskData.example.substring(bef,length),"*".repeat(length-bef));
              }else{
                this.show = this.maskData.example;
              }
            }
          }else if(this.config ==2){
            if(this.maskData.config['2'].after == ""){
              this.show="";
            }else{
              let length = this.maskData.example.length;
              let aft = parseInt(this.maskData.config['2'].after)
              if(length > aft){
                this.show = this.maskData.example.replace(this.maskData.example.substring(0,length-aft),"*".repeat(length-aft));
              }else{
                this.show = this.maskData.example;
              }
            }
          }else if(this.config ==3){
            if(this.maskData.config['3'].before == "" || this.maskData.config['3'].after == ""){
              this.show="";
            }else{
              let length = this.maskData.example.length;
              let aft = parseInt(this.maskData.config['3'].after);
              let bef = parseInt(this.maskData.config['3'].before);
              if(length > aft+bef){
                this.show = this.maskData.example.replace(this.maskData.example.substring(bef,length-aft),"*".repeat(length-aft-bef));
              }else{
                this.show = this.maskData.example;
              }
            }
          }else{
            debugger;
            if(this.maskData.config['4'].chart == "" || this.maskData.config['4'].num == "" ){
              this.show="";
            }else{
              let leth = this.maskData.example.length;
              let where = parseInt(this.maskData.config['4'].where);
              let num = parseInt(this.maskData.config['4'].num);
              let offset = parseInt(this.maskData.config['4'].offset);
              let index = this.maskData.example.indexOf(this.maskData.config['4'].chart);
              if(index <0 || (num == 0 && offset == 0)){
                this.show = '*'.repeat(length);
              }else if((where ==1 && num>=index && offset >=(length-index))||(where ==2 && index+offset <=0 && num >=(length-index))){
                this.show = this.maskData.example;
              }else{
                if(where ==1){
                  let lef = Math.max(num,-offset);
                  let rgt = Math.max(0,offset);
                  let rp = '/.{0,'+lef+'}'+this.maskData.config['4'].chart+'.{0,'+rgt+'}/';
                  let cart = this.maskData.example.match(eval(rp))[0];
                  
                  if(cart != ""){
                    let elet = this.maskData.example.indexOf(cart);
                    let cleth = cart.length;
                    this.show = '*'.repeat(elet)+cart+'*'.repeat(leth-elet-cleth);
                  }else{
                    this.show = this.maskData.example.replace(this.maskData.example.substring(0,leth),'*'.repeat(leth));
                  }
                }else{
                  let lef = Math.max(0,-offset);
                  let rgt = Math.max(num,offset);
                  let rp = '/.{0,'+lef+'}'+this.maskData.config['4'].chart+'.{0,'+rgt+'}/';
                  let cart = this.maskData.example.match(eval(rp))[0];
                  if(cart != ""){
                    let elet = this.maskData.example.indexOf(cart);
                    let cleth = cart.length;
                    this.show = '*'.repeat(elet)+cart+'*'.repeat(leth-elet-cleth);
                  }else{
                    this.show = this.maskData.example.replace(this.maskData.example.substring(0,leth),'*'.repeat(leth));
                  }
                }
              }
            }
          }
        }
      },
      deep:true
    },
  }
}

</script>
<style>
.el-header {
  line-height: 60px;
  text-align: start;
  background-color: #ccc;
}
</style>
